<template>
  <view class="pages safety-150 bg-#ffffff">
    <mt-navbar title="" :show-back="show" bg-color="linear-gradient(to right, #fbfdff 0%, #f5faff 100%)"> </mt-navbar>
    <view class="bg"></view>
    <view class="pt-24rpx relative z-2">
      <view class="px-32rpx">
        <view class="text-48rpx text-#1C213E font-bold text-center mb-62rpx">购买线索包</view>
        <image class="w-full h-140rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/information-clue3.png"></image>
      </view>
      <view class="px-32rpx mt-40rpx mb-32rpx">
        <view
          v-for="(item, index) in clueList"
          :key="index"
          class="clue-list"
          :class="{ active: currentIndex === index }"
          @click="currentIndex = index"
        >
          <view class="text-32rpx text-#886D53 font-bold mb-16rpx ellipsis">
            {{ item.packetName }}
            <!-- <text v-if="item.packetType === 1">标准包</text>
              <text v-if="item.packetType === 2">体验包</text> -->
          </view>
          <view class="flex items-end">
            <view class="flex items-end justify-center">
              <text class="text-48rpx text-#503716 font-bold">{{ amountTransfer(item.packetPrice) }}</text>
              <text class="text-28rpx text-#503716 pb-4rpx ml-4rpx">元</text>
            </view>
            <view class="text-28rpx text-#886D53 ml-40rpx"> {{ item.packetClueCount }}条线索 </view>
          </view>
          <image
            class="absolute right-0 top-0 w-124rpx h-40rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/information-clue3.svg"
          ></image>
        </view>
      </view>
      <view v-if="clueList[currentIndex]" class="px-32rpx break-all text-28rpx text-#727687">{{ clueList[currentIndex].packetDesc }}</view>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2 z-10">
      <mt-button class="sub-btn" shape="circle" :shake="false" @click="openPayPopup">
        <text v-if="clueList[currentIndex]" class="mr-10rpx">￥{{ amountTransfer(clueList[currentIndex].packetPrice) }}</text>
        <text>立即购买</text>
      </mt-button>
    </view>

    <mt-pay-popup ref="payRef" :water="false" @confirm="handlePayConfirm"></mt-pay-popup>
  </view>
</template>

<script setup>
import { cluegetCluePacketConfigPage, ordercreateCluePacketOrder } from '@/api/index';
import { amountTransfer, initiationPayments } from '@/utils/tools.js';

const currentIndex = ref(0);
const clueList = ref([]);
async function getData() {
  const res = await cluegetCluePacketConfigPage({ pageNum: 1, pageSize: 20 });
  clueList.value = res.data?.items || [];
}

const payRef = ref();
function openPayPopup() {
  if (!clueList.value[currentIndex.value].cluePacketConfigId) {
    uni.showToast({
      icon: 'none',
      title: '请选择线索包'
    });
    return;
  }

  payRef.value.open({
    amount: clueList.value[currentIndex.value].packetPrice
  });
}

async function handlePayConfirm(payType) {
  let res = null;

  payRef.value.close();
  if (payType === 1) {
  } else if (payType === 2) {
    res = await ordercreateCluePacketOrder({
      cluePacketConfigId: clueList.value[currentIndex.value].cluePacketConfigId,
      paymentChannel: payType
    });
    await initiationPayments(payType, res.data.orderStr);
    uni.redirectTo({
      url: '/pages/common/bindOneProduct'
    });
  }
}

const show = ref(false);
onLoad((options) => {
  show.value = options?.back !== '0';
  getData();
});
</script>

<style lang="scss" scoped>
.pages {
  min-height: calc(100vh - var(--window-top));
  box-sizing: border-box;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 658rpx;
    background: linear-gradient(234deg, rgba(20, 132, 238, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%);
  }
}
.clue-list {
  position: relative;
  padding: 40rpx 32rpx;
  margin-bottom: 16rpx;
  background-image: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/information-clue1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  &.active {
    background-image: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/information-clue2.png');
  }
}
.sub-btn.mt-button {
  width: 100%;
  color: #4f3716;
  font-weight: bold;
  background: linear-gradient(90deg, #ead095 0%, #d5b27c 100%);
}
</style>
